<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="flex flex-row justify-between items-center">
                    <div class="font-bold">新增菜品</div>
                    <el-link type="primary" @click="$router.replace({ name: 'FoodInfoList' })">返回列表</el-link>
                </div>
            </template>
            <!-- 菜品表单 -->
            <el-form label-width="120px" :model="foodInfoData" ref="foodInfoFormEl" :rules="foodInfoDataRules">
                <el-form-item label="菜品名称" prop="food_name">
                    <el-input v-model="foodInfoData.food_name" placeholder="请输入菜品名称"></el-input>
                </el-form-item>
                <el-form-item label="菜品价格" prop="price">
                    <el-input-number :min="0" v-model="foodInfoData.price" />
                </el-form-item>
                <el-form-item label="菜品分类" prop="cid">
                    <el-select v-model="foodInfoData.cid" placeholder="请选择菜品分类" class="w-full">
                        <el-option v-for="item in allCategoryInfo" :key="item.id" :value="item.id"
                            :label="item.category_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜品图片" prop="food_img">
                    <el-upload v-loading="isUploadingImg" element-loading-text="正在上传图片" :show-file-list="false"
                        :action="baseURL + '/foodInfo/uploadFoodImg'" :before-upload="beforeUpload"
                        :on-success="uploadSuccess" :headers="{ softeem_ele_admin_token: store.token }" name="food_img"
                        class="w-[160px] h-[160px] border border-dashed border-gray-300 flex flex-row justify-center items-center">
                        <el-image class="w-full h-full" fit="contain" :src="baseURL + foodInfoData.food_img" lazy
                            v-if="foodInfoData.food_img">
                            <template #placeholder>
                                <div
                                    class="text-primaryColor text-[14px] w-full h-full flex flex-row justify-center items-center">
                                    正在加载图片...</div>
                            </template>
                        </el-image>
                        <el-icon size="55px" color="#808080" v-else>
                            <PictureFilled />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="菜品描述" prop="food_desc">
                    <el-input v-model="foodInfoData.food_desc" type="textarea" :rows="5" placeholder="请输入菜品描述信息">
                    </el-input>
                </el-form-item>
                <el-form-item label="菜品权重" prop="weight">
                    <div class="w-[350px] flex flex-row justify-between items-center">
                        <el-slider v-model="foodInfoData.weight" :min="0" :max="100" :step="0.1" />
                        <el-tag class="ml-5 w-[26px]">{{ foodInfoData.weight }}</el-tag>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="isSubmiting" :loading-icon="Loading" @click="submitForm">保存数据
                    </el-button>
                    <el-button type="danger" @click="resetForm">重置表单</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </page-view>
</template>

<script setup>
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus"
import { ref, reactive, inject } from "vue"
import API from "../../utils/API";
import { mainStore } from "../../store"
import { useRouter } from "vue-router"


const router = useRouter();
const store = mainStore();
const baseURL = inject("baseURL")
const foodInfoData = reactive({
    food_name: "",
    price: 0,
    cid: "",
    food_desc: "",
    food_img: "",
    weight: 0
})

// 表单验证规则
const foodInfoDataRules = {
    food_name: [{ required: "true", message: "请输入菜品名称", trigger: "blur" }],
    price: [{ required: "true", message: "菜品价格不能为空", trigger: "blur" }],
    cid: [{ required: "true", message: "请选择菜品类别", trigger: "blur" }],
    food_desc: [{ required: "true", message: "请输入菜品描述信息", trigger: "blur" }],
    food_img: [{ required: "true", message: "请上传菜品图片", trigger: "blur" }],
    weight: [{ required: "true", message: "请设置菜品权重", trigger: "blur" }]
}



const allCategoryInfo = ref([]);

// 需要请求接口获取所有的菜品的分类信息
API.categoryInfo.getAllList().then(result => allCategoryInfo.value = result);

// 上传图片之前的回调
const isUploadingImg = ref(false);
const beforeUpload = (rawFile) => {
    // console.log(rawFile);
    let reg = /^image\/(jpe?g|png|webp|gif|bmp)/;
    if (reg.test(rawFile.type)) {
        // 说明是一个图片
        if (rawFile.size / 1024 / 1024 > 5) {
            // 说明上传的图片大于5M
            ElNotification({
                type: "warning",
                title: "提示",
                message: "图片大小不能大于5M"
            })
            // 此时都不成功，返回false
            return false;
        }
        else {
            isUploadingImg.value = true;
        }
    } else {
        // 不是一个图片
        ElNotification({
            type: "error",
            title: "错误",
            message: "请选择正确的图片信息，必须是jpeg,jpg,png,webp,gif,bmp"
        })
        return false;
    }
}

// 上传图片成功的回调
const uploadSuccess = (result) => {
    // console.log("cg");
    // console.log(result);
    foodInfoData.food_img = result.data;
    isUploadingImg.value = false;
}


const foodInfoFormEl = ref(null);
// 提交表单
const submitForm = () => {
    foodInfoFormEl.value.validate(valid => {
        if (valid) {
            addFoodInfo();
        }
        else {
            ElNotification({
                type: "warning",
                title: "警告",
                message: "验证不通过，请重试"
            })
        }
    })
}

// 编写新增菜品的方法
const isSubmiting = ref(false);
const addFoodInfo = () => {
    isSubmiting.value = true;
    API.foodInfo.add(foodInfoData)
        .then(result => {
            ElNotification({
                type: "success",
                title: "成功",
                message: "新增菜品成功"
            })
            router.replace({
                name: "FoodInfoList"
            })
        }).catch(error => {
            ElNotification({
                type: "error",
                title: "失败",
                message: "新增菜品失败"
            })
        }).finally(() => {
            isSubmiting.value = false;
        })
}

// 重置表单
const resetForm = () => {
    foodInfoFormEl.value.resetFields();
}
</script>


<style scoped lang="scss">
:deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
}
</style>